import { Component, Input, OnInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-wordcloud-chart',
  templateUrl: './wordcloud-chart.component.html',
  styleUrls: ['./wordcloud-chart.component.scss']
})
export class WordcloudChartComponent implements OnInit, OnChanges {

  @Input() title = ''; // 图标标题
  @Input() data: []; // 显示数据
  @Input() indicator: []; // 数据上限
  @Input() legend: []; // 下标
  @Input() index: number;
  @Input() givenHeight = 500;
  @Input() givenWidth = 800;
  @Input() givenShape = 'diamond';
  options = {};
  theme: string;

  constructor() { }

  getHeight() {
    return this.givenHeight;
  }

  ngOnInit(): void {
    // console.log( 'data' ,this.data);
    this.options = {
      tooltip: {
        show: true
      },
      series: [{
        type: 'wordCloud',
        gridSize: 6,
        shape: this.givenShape,
        sizeRange: [12, 50],
        width: this.givenWidth,
        height: this.givenHeight,
        textStyle: {
          normal: {
            color() {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: this.data
      }]
    };
  }

  ngOnChanges(): void {
    this.options = {
      tooltip: {
        show: true
      },
      series: [{
        type: 'wordCloud',
        gridSize: 6,
        shape: this.givenShape,
        sizeRange: [12, 50],
        width: this.givenWidth,
        height: this.givenHeight,
        textStyle: {
          normal: {
            color() {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: this.data
      }]
    };
  }
}

